<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>值班管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            touch-action: manipulation;
            -ms-touch-action: manipulation;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
            background: #f7f9fa;
            min-height: 100vh;
            padding: 0;
            margin: 0;
            line-height: 1.5;
            color: #0f1419;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            touch-action: manipulation;
            -ms-touch-action: manipulation;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background: #ffffff;
            min-height: 100vh;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
            position: relative;
            padding-bottom: 80px;
        }

        .header {
            background: #ffffff;
            color: #0f1419;
            padding: 16px 20px;
            border-bottom: 1px solid #eff3f4;
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header-title {
            flex: 1;
        }

        .header h1 {
            font-size: 20px;
            font-weight: 800;
            margin: 0;
            margin-bottom: 2px;
        }

        .header p {
            font-size: 13px;
            color: #536471;
            margin: 0;
        }

        .cycle-setting-btn {
            background: #f7f9fa;
            border: 1px solid #eff3f4;
            border-radius: 16px;
            padding: 6px 12px;
            font-size: 12px;
            color: #536471;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .cycle-setting-btn:hover {
            background: #eff3f4;
        }

        /* 周期选择页面样式 */
        .cycle-selection {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding-bottom: 80px;
        }

        .cycle-header {
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .cycle-selection .content-wrapper {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cycle-options {
            display: flex;
            gap: 16px;
            margin: 24px 0;
            padding: 20px;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .cycle-options::-webkit-scrollbar {
            height: 6px;
        }

        .cycle-options::-webkit-scrollbar-track {
            background: #f1f3f4;
            border-radius: 3px;
        }

        .cycle-options::-webkit-scrollbar-thumb {
            background: #1d9bf0;
            border-radius: 3px;
        }

        .cycle-options::-webkit-scrollbar-thumb:hover {
            background: #1976d2;
        }

        .cycle-option {
            background: #ffffff;
            border: 2px solid #eff3f4;
            border-radius: 20px;
            padding: 24px 20px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 140px;
            max-width: 140px;
            height: 180px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            scroll-snap-align: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transform: scale(0.95);
            opacity: 0.7;
        }

        .cycle-option::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #f7f9fa 0%, #ffffff 100%);
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .cycle-option:hover::before {
            opacity: 1;
        }

        .cycle-option:hover {
            transform: scale(1) translateY(-8px);
            opacity: 1;
            border-color: #1d9bf0;
            box-shadow: 0 12px 24px rgba(29, 155, 240, 0.15);
        }

        .cycle-option.selected {
            background: linear-gradient(135deg, #1d9bf0 0%, #1976d2 100%);
            color: white;
            border-color: #1d9bf0;
            transform: scale(1.05) translateY(-12px);
            opacity: 1;
            box-shadow: 0 16px 32px rgba(29, 155, 240, 0.25);
            z-index: 10;
        }

        .cycle-option.selected::before {
            opacity: 0;
        }

        .cycle-info {
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .cycle-number {
            font-size: 32px;
            font-weight: 800;
            color: #1d9bf0;
            min-width: 60px;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .cycle-option.selected .cycle-number {
            color: white;
        }

        .cycle-label {
            font-size: 16px;
            font-weight: 700;
            margin: 0 0 4px 0;
            color: #0f1419;
        }

        .cycle-option.selected .cycle-label {
            color: white;
        }

        .cycle-description {
            font-size: 14px;
            color: #536471;
            margin: 0;
        }

        .cycle-option.selected .cycle-description {
            color: rgba(255, 255, 255, 0.8);
        }

        .custom-cycle {
            margin-top: 24px;
            background: #ffffff;
            border: 1px solid #eff3f4;
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        .custom-cycle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #f7f9fa 0%, #ffffff 100%);
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .custom-cycle:hover::before {
            opacity: 1;
        }

        .custom-cycle:hover {
            border-color: #1d9bf0;
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(29, 155, 240, 0.1);
        }

        .custom-cycle.active {
            background: linear-gradient(135deg, #1d9bf0 0%, #1a8cd8 100%);
            color: white;
            border-color: #1d9bf0;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(29, 155, 240, 0.3);
        }

        .custom-cycle.active::before {
            opacity: 0;
        }

        .custom-cycle h3 {
            margin: 0 0 16px 0;
            font-size: 16px;
            font-weight: 700;
            color: #0f1419;
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .custom-cycle.active h3 {
            color: white;
        }

        .custom-cycle h3::before {
            content: '⚙️';
            font-size: 14px;
        }

        .custom-input-group {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-wrap: wrap;
            justify-content: center;
        }

        .custom-input-group span {
            font-size: 14px;
            font-weight: 500;
            color: #0f1419;
        }

        .custom-cycle.active .custom-input-group span {
            color: white;
        }

        .custom-input {
            width: 80px;
            padding: 8px 12px;
            border: 1px solid #eff3f4;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            transition: all 0.2s ease;
            background: white;
            position: relative;
            z-index: 2;
        }

        .custom-input:focus {
            outline: none;
            border-color: #1d9bf0;
            box-shadow: 0 0 0 1px #1d9bf0;
        }

        .custom-cycle.active .custom-input {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(255, 255, 255, 0.3);
            color: #0f1419;
        }

        .custom-cycle.active .custom-input:focus {
            background: white;
            border-color: #1d9bf0;
        }

        .cycle-bottom-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 600px;
            background: #ffffff;
            border-top: 1px solid #eff3f4;
            padding: 16px 20px;
            z-index: 100;
        }

        .confirm-cycle-btn {
            background: #1d9bf0;
            color: white;
            padding: 16px 24px;
            border: none;
            border-radius: 24px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 700;
            transition: all 0.2s ease;
            width: 100%;
            min-height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .confirm-cycle-btn:hover {
            background: #1a8cd8;
        }

        .confirm-cycle-btn:disabled {
            background: #8b98a5;
            cursor: not-allowed;
            opacity: 0.6;
        }

        /* 主系统样式 */
        .main-system {
            display: none;
        }

        .content {
            padding: 0;
        }

        .section {
            border-bottom: 1px solid #eff3f4;
            padding: 20px 24px;
            background: #ffffff;
        }

        .section:last-child {
            border-bottom: none;
        }

        .section h2 {
            color: #0f1419;
            margin: 0 0 16px 0;
            font-size: 20px;
            font-weight: 800;
        }

        /* 底部导航栏 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 600px;
            background: #ffffff;
            border-top: 1px solid #eff3f4;
            display: flex;
            z-index: 100;
        }

        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 12px 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #536471;
            text-decoration: none;
        }

        .nav-item.active {
            color: #1d9bf0;
        }

        .nav-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }

        .nav-label {
            font-size: 11px;
            font-weight: 500;
        }

        /* Tab内容区域 */
        .tab-content {
            display: none;
            padding: 0;
        }

        .tab-content.active {
            display: block;
        }

        /* 基准时间提示 */
        .baseline-prompt {
            text-align: center;
            padding: 60px 24px;
            color: #536471;
        }

        .baseline-prompt-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.6;
        }

        .baseline-prompt h3 {
            font-size: 18px;
            font-weight: 700;
            color: #0f1419;
            margin: 0 0 8px 0;
        }

        .baseline-prompt p {
            font-size: 14px;
            margin: 0 0 20px 0;
            line-height: 1.5;
        }

        .baseline-prompt-btn {
            background: #1d9bf0;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 700;
            transition: all 0.2s ease;
        }

        .baseline-prompt-btn:hover {
            background: #1a8cd8;
        }

        /* 操作反馈提示 */
        .feedback-toast {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: rgba(76, 175, 80, 0.95);
            color: white;
            padding: 12px 24px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 500;
            z-index: 1000;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
        }

        .feedback-toast.show {
            transform: translateX(-50%) translateY(0);
        }

        .feedback-toast.error {
            background: rgba(244, 67, 54, 0.95);
            box-shadow: 0 8px 25px rgba(244, 67, 54, 0.3);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }

        input[type="date"], input[type="text"] {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #eff3f4;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.2s ease;
            background: white;
            font-weight: 400;
        }

        input[type="date"]:focus, input[type="text"]:focus {
            outline: none;
            border-color: #1d9bf0;
            box-shadow: 0 0 0 1px #1d9bf0;
        }

        .btn {
            background: #1d9bf0;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 700;
            transition: all 0.2s ease;
            width: 100%;
            margin-top: 12px;
        }

        .btn:hover {
            background: #1a8cd8;
        }

        .btn-query {
            background: #1d9bf0;
        }

        .btn-query:hover {
            background: #1a8cd8;
        }

        .result {
            margin-top: 20px;
            padding: 20px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            border: 1px solid #eff3f4;
            background: #ffffff;
        }

        .result.on-duty {
            background: #e3f2fd;
            border: 1px solid #90caf9;
            color: #0d47a1;
            box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
        }

        .result.on-duty::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: #1976d2;
            border-radius: 2px 0 0 2px;
        }

        .result.on-duty .status-indicator {
            width: 12px;
            height: 12px;
            background: #1976d2;
            border-radius: 50%;
            margin-right: 10px;
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }

        .result.on-duty .status-indicator::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
        }

        .result.off-duty {
            background: #fff9e6;
            border: 1px solid #ffcc80;
            color: #e65100;
            box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
        }

        .result.off-duty::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: #FF9800;
            border-radius: 2px 0 0 2px;
        }

        .result.off-duty .status-indicator {
            width: 12px;
            height: 12px;
            background: #FF9800;
            border-radius: 50%;
            margin-right: 10px;
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }

        .result.off-duty .status-indicator::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
        }

        .info {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            border-left: 4px solid #2196F3;
        }

        .info h3 {
            color: #1976D2;
            margin-bottom: 10px;
        }

        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-indicator.on {
            background: #4CAF50;
            box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
        }

        .status-indicator.off {
            background: #FF9800;
            box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
        }

        .calendar-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .calendar-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .calendar-card h4 {
            color: #333;
            margin-bottom: 10px;
        }

        .calendar-card .date {
            font-size: 1.2em;
            font-weight: bold;
            color: #1976d2;
            margin-bottom: 5px;
        }

        /* 日历样式 */
        .calendar-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 0;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            background: #f7f9fa;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 20px;
            border: 1px solid #eff3f4;
        }

        .calendar-header {
            background: #ffffff;
            color: #536471;
            padding: 12px 8px;
            text-align: center;
            font-weight: 600;
            font-size: 13px;
            border-bottom: 1px solid #eff3f4;
        }

        .calendar-day {
            background: #ffffff;
            min-height: 70px;
            padding: 8px 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            border-radius: 0;
        }

        .calendar-day:hover {
            background: #f7f9fa;
        }

        .calendar-day.other-month {
            background: #f7f9fa;
            color: #8b98a5;
        }

        .calendar-day.other-month:hover {
            background: #eff3f4;
        }

        .calendar-day.today {
            background: #f8f9fa;
            border: 2px dashed #1d9bf0;
            color: #1d9bf0;
            position: relative;
        }

        .calendar-day.today:hover {
            background: #e9ecef;
        }

        .calendar-day.today::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 4px;
            background: linear-gradient(45deg, #1d9bf0, #42a5f5);
            z-index: -1;
            opacity: 0.08;
        }

        .calendar-day.on-duty {
            background: #e3f2fd;
            color: #0d47a1;
            border: 2px solid #90caf9;
        }

        .calendar-day.on-duty:hover {
            background: #bbdefb;
        }

        /* 今天同时也值班的情况 */
        .calendar-day.today.on-duty {
            background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
            border: 2px dashed #1d9bf0;
            color: #0d47a1;
            box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.2);
        }

        .calendar-day.today.on-duty:hover {
            background: linear-gradient(135deg, #e9ecef 0%, #bbdefb 100%);
        }

        .calendar-day.today.on-duty::before {
            background: linear-gradient(45deg, #1d9bf0, #1976d2);
            opacity: 0.1;
        }

        .calendar-day.today.on-duty .duty-indicator {
            background: linear-gradient(135deg, #1976d2, #0d47a1);
            color: white;
            font-weight: 700;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 2px 6px rgba(25, 118, 210, 0.4);
            max-width: 40px;
        }

        .day-number {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 4px;
            line-height: 1;
        }

        .duty-indicator {
            font-size: 9px;
            padding: 3px 8px;
            border-radius: 12px;
            background: #eff3f4;
            color: #536471;
            white-space: nowrap;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.8);
            max-width: 45px;
            overflow: hidden;
            position: relative;
        }

        .duty-indicator.scrolling {
            width: 35px;
            overflow: hidden;
        }

        .duty-indicator.scrolling .scroll-text {
            display: inline-block;
            animation: scroll-horizontal 4s ease-in-out infinite;
        }

        @keyframes scroll-horizontal {
            0% { transform: translateX(0); }
            20% { transform: translateX(0); }
            45% { transform: translateX(-20px); }
            70% { transform: translateX(-20px); }
            90% { transform: translateX(0); }
            100% { transform: translateX(0); }
        }

        .calendar-day.on-duty .duty-indicator {
            background: linear-gradient(135deg, #1976d2, #1565c0);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3);
            max-width: 40px;
        }

        .calendar-day.today .duty-indicator {
            background: linear-gradient(135deg, #1d9bf0, #42a5f5);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 2px 4px rgba(29, 155, 240, 0.3);
            max-width: 35px;
        }

        .calendar-day.today.on-duty .duty-indicator {
            background: linear-gradient(135deg, #1976d2, #0d47a1);
            color: white;
            font-weight: 700;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 2px 6px rgba(25, 118, 210, 0.4);
            max-width: 40px;
        }

        .calendar-day.today.on-duty .duty-indicator.scrolling {
            width: 32px;
        }

        .calendar-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 16px;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #536471;
            font-weight: 500;
        }

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            margin-right: 6px;
        }

        .legend-color.duty {
            background: #e3f2fd;
            border: 2px solid #90caf9;
        }

        .legend-color.today {
            background: #f8f9fa;
            border: 2px dashed #1d9bf0;
        }

        .legend-color.today-duty {
            background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
            border: 2px dashed #1d9bf0;
        }

        .legend-color.normal {
            background: white;
            border: 2px solid #eff3f4;
        }

        .btn-nav {
            background: #ffffff;
            color: #0f1419;
            border: 1px solid #eff3f4;
            padding: 10px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
            min-width: 80px;
        }

        .btn-nav:hover {
            background: #f7f9fa;
            border-color: #1d9bf0;
            color: #1d9bf0;
        }

        /* 移动端响应式 */
        @media (max-width: 768px) {
            .container {
                box-shadow: none;
            }

            .header {
                padding: 12px 16px;
            }

            .section {
                padding: 16px 20px;
            }

            .cycle-selection {
                padding: 0;
            }

            .cycle-header {
                padding: 12px 16px;
            }

            .cycle-selection .content-wrapper {
                padding: 16px;
            }

            /* 周期选择页面移动端优化 */
            .cycle-selection .content-wrapper > div {
                padding: 16px !important;
            }

            .cycle-selection h2 {
                font-size: 18px !important;
                margin-bottom: 12px !important;
            }

            .cycle-selection p {
                font-size: 13px !important;
                margin-bottom: 20px !important;
                line-height: 1.4;
            }

            .cycle-options {
                grid-template-columns: 1fr;
                gap: 12px;
                margin: 25px 0 !important;
            }

            .cycle-option {
                padding: 24px 20px;
                border-radius: 16px;
                border-width: 2px;
                min-height: 140px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .cycle-number {
                font-size: 2.5em;
                margin-bottom: 8px;
            }

            .cycle-label {
                font-size: 1.1em;
                margin-bottom: 6px;
                font-weight: 600;
            }

            .cycle-description {
                font-size: 0.9em;
                opacity: 0.85;
            }

            .custom-cycle {
                margin-top: 20px;
                padding: 16px;
            }

            .custom-cycle h3 {
                font-size: 16px;
                margin-bottom: 12px;
            }

            .custom-input-group {
                gap: 6px;
                margin-bottom: 0;
            }

            .custom-input-group span {
                font-size: 14px;
            }

            .custom-input {
                width: 70px;
                padding: 8px 6px;
                font-size: 15px;
            }

            .confirm-cycle-btn {
                width: 100%;
                padding: 16px 20px;
                font-size: 17px;
                margin-top: 20px;
                min-height: 56px;
                border-radius: 50px;
            }

            .calendar-controls {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 10px;
                margin-bottom: 20px;
                padding: 0 5px;
            }

            .btn-nav {
                padding: 10px 12px;
                font-size: 13px;
                flex-shrink: 0;
                min-width: 50px;
            }

            #calendarTitle {
                font-size: 16px;
                flex-grow: 1;
                text-align: center;
                margin: 0;
            }

            .calendar-day {
                min-height: 65px;
                font-size: 14px;
            }

            .day-number {
                font-size: 15px;
            }

            .duty-indicator {
                font-size: 10px;
                padding: 1px 4px;
            }

            .calendar-legend {
                gap: 15px;
                font-size: 13px;
            }

            .legend-color {
                width: 20px;
                height: 20px;
            }

            .calendar-info {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .btn {
                font-size: 16px;
                padding: 15px;
            }

            input[type="date"] {
                font-size: 16px;
                padding: 15px;
            }

            label {
                font-size: 1.1em;
                margin-bottom: 10px;
            }

            .result {
                font-size: 16px;
                padding: 18px;
            }

            .info {
                padding: 20px;
            }

            .info h3 {
                font-size: 1.2em;
                margin-bottom: 15px;
            }

            .info p {
                margin-bottom: 10px;
                font-size: 1em;
            }

            .status-indicator {
                width: 14px;
                height: 14px;
                margin-right: 10px;
            }

            .btn {
                min-height: 52px;
                font-size: 16px;
                border-radius: 50px;
            }

            .bottom-nav {
                border-top: 1px solid #eff3f4;
            }

            .nav-item {
                padding: 10px 8px;
            }

            .nav-icon {
                font-size: 18px;
                margin-bottom: 2px;
            }

            .nav-label {
                font-size: 10px;
            }

            .baseline-prompt {
                padding: 40px 20px;
            }

            .baseline-prompt-icon {
                font-size: 36px;
                margin-bottom: 12px;
            }

            .baseline-prompt h3 {
                font-size: 16px;
            }

            .baseline-prompt p {
                font-size: 13px;
            }

            .baseline-prompt-btn {
                padding: 10px 20px;
                font-size: 14px;
            }

            .calendar-controls {
                padding: 0 10px;
            }
        }

        /* 超小屏幕优化 */
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            .container {
                margin: 0;
                border-radius: 8px;
            }

            .header {
                padding: 15px;
            }

            .header h1 {
                font-size: 1.6em;
            }

            .header p {
                font-size: 0.95em;
            }

            /* 周期选择页面超小屏幕优化 */
            .cycle-selection {
                padding: 15px;
            }

            .cycle-selection h2 {
                font-size: 1.3em !important;
                margin-bottom: 12px !important;
            }

            .cycle-selection p {
                font-size: 0.9em !important;
                margin-bottom: 20px !important;
            }

            .cycle-options {
                gap: 10px;
                margin: 20px 0 !important;
            }

            .cycle-option {
                padding: 15px 12px;
                border-radius: 10px;
                border-width: 2px;
            }

            .cycle-number {
                font-size: 1.8em;
                margin-bottom: 6px;
            }

            .cycle-label {
                font-size: 1em;
                margin-bottom: 3px;
            }

            .cycle-description {
                font-size: 0.8em;
            }

            .custom-cycle {
                margin-top: 16px;
                padding: 12px;
            }

            .custom-cycle h3 {
                font-size: 15px;
                margin-bottom: 10px;
            }

            .custom-input-group {
                gap: 4px;
                margin-bottom: 0;
            }

            .custom-input-group span {
                font-size: 13px;
            }

            .custom-input {
                width: 60px;
                padding: 6px 4px;
                font-size: 14px;
                border-radius: 6px;
            }

            .confirm-cycle-btn {
                padding: 10px 15px;
                font-size: 15px;
                border-radius: 8px;
            }

            .content {
                padding: 15px;
            }

            .section {
                padding: 15px;
                margin-bottom: 20px;
            }

            .section h2 {
                font-size: 1.1em;
            }

            .calendar-header {
                padding: 12px 4px;
                font-size: 12px;
            }

            .calendar-day {
                min-height: 55px;
                padding: 6px 2px;
            }

            .day-number {
                font-size: 14px;
            }

            .duty-indicator {
                font-size: 9px;
                padding: 1px 3px;
            }

            .calendar-legend {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }

            .legend-item {
                font-size: 12px;
            }

            .btn-nav {
                padding: 10px 12px;
                font-size: 13px;
            }

            #calendarTitle {
                font-size: 1.1em;
            }
        }

        /* 时间轴样式 */
        .timeline-container {
            padding: 20px 0;
            position: relative;
            max-height: calc(100vh - 200px);
            overflow-y: auto;
        }

        .timeline-summary {
            text-align: center;
            margin-bottom: 24px;
            padding: 16px 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 12px;
            border: 1px solid #dee2e6;
        }

        .timeline-summary h3 {
            color: #1d9bf0;
            margin: 0 0 8px 0;
            font-size: 18px;
            font-weight: 700;
        }

        .timeline-summary p {
            color: #6c757d;
            margin: 0;
            font-size: 14px;
        }

        .timeline {
            position: relative;
            padding: 20px 0;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 30px;
            top: 0;
            bottom: 0;
            width: 3px;
            background: linear-gradient(180deg, #1d9bf0 0%, #e3f2fd 100%);
            border-radius: 2px;
            box-shadow: 0 0 10px rgba(29, 155, 240, 0.3);
        }

        .timeline-item {
            position: relative;
            padding: 0 0 24px 70px;
            margin-bottom: 20px;
            animation: fadeInUp 0.6s ease-out;
        }

        .timeline-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .timeline-marker {
            position: absolute;
            left: -38px;
            top: 8px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #1d9bf0;
            border: 3px solid #ffffff;
            box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 2;
        }

        .timeline-marker.today {
            background: linear-gradient(135deg, #ff6b6b, #ee5a52);
            animation: pulse 2s infinite;
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .timeline-marker.soon {
            background: linear-gradient(135deg, #ffa726, #ff9800);
            box-shadow: 0 0 0 3px rgba(255, 167, 38, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
            }
            50% {
                transform: scale(1.1);
                box-shadow: 0 0 0 6px rgba(255, 107, 107, 0.2);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
            }
        }

        .timeline-content {
            background: #ffffff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid #e9ecef;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .timeline-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #1d9bf0, #42a5f5);
            border-radius: 12px 12px 0 0;
        }

        .timeline-content.today::before {
            background: linear-gradient(90deg, #ff6b6b, #ee5a52);
        }

        .timeline-content.soon::before {
            background: linear-gradient(90deg, #ffa726, #ff9800);
        }

        .timeline-content:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        .timeline-date {
            font-size: 24px;
            font-weight: 800;
            color: #1d9bf0;
            margin: 0 0 8px 0;
            line-height: 1;
        }

        .timeline-date.today {
            color: #ff6b6b;
        }

        .timeline-date.soon {
            color: #ffa726;
        }

        .timeline-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        .timeline-day {
            font-size: 16px;
            color: #6c757d;
            font-weight: 500;
        }

        .timeline-countdown {
            background: linear-gradient(135deg, #e3f2fd, #f8f9fa);
            color: #1d9bf0;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            border: 1px solid rgba(29, 155, 240, 0.2);
        }

        .timeline-countdown.today {
            background: linear-gradient(135deg, #ffebee, #fce4ec);
            color: #ff6b6b;
            border-color: rgba(255, 107, 107, 0.2);
        }

        .timeline-countdown.soon {
            background: linear-gradient(135deg, #fff3e0, #fce4ec);
            color: #ffa726;
            border-color: rgba(255, 167, 38, 0.2);
        }

        .timeline-empty {
            text-align: center;
            padding: 60px 20px;
            color: #6c757d;
        }

        .timeline-empty-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.6;
        }

        .timeline-empty h3 {
            font-size: 18px;
            color: #495057;
            margin: 0 0 8px 0;
        }

        .timeline-empty p {
            font-size: 14px;
            margin: 0;
        }

        /* 响应式优化 */
        @media (max-width: 768px) {
            .timeline-container {
                padding: 16px 0;
                max-height: calc(100vh - 180px);
            }

            .timeline::before {
                left: 20px;
            }

            .timeline-item {
                padding-left: 50px;
            }

            .timeline-marker {
                left: -28px;
                width: 12px;
                height: 12px;
            }

            .timeline-content {
                padding: 16px;
            }

            .timeline-date {
                font-size: 20px;
            }

            .timeline-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .timeline-summary {
                margin-bottom: 20px;
                padding: 12px 16px;
            }

            .timeline-summary h3 {
                font-size: 16px;
            }
        }

        /* 紧凑的一屏展示布局 */
        .duties-container {
            padding: 16px;
            max-height: calc(100vh - 160px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .duties-header {
            background: linear-gradient(135deg, #1d9bf0, #42a5f5);
            color: white;
            padding: 16px 20px;
            border-radius: 12px;
            margin-bottom: 16px;
            text-align: center;
            flex-shrink: 0;
            position: relative;
        }

        .duties-header h3 {
            margin: 0 0 4px 0;
            font-size: 18px;
            font-weight: 700;
        }

        .duties-header p {
            margin: 0 0 12px 0;
            font-size: 13px;
            opacity: 0.9;
        }

        .add-to-calendar-btn {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .add-to-calendar-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .add-to-calendar-btn:active {
            transform: translateY(0);
        }

        .calendar-icon {
            font-size: 14px;
        }

        .duties-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px;
            flex: 1;
            align-content: start;
            overflow-y: auto;
            max-height: calc(100vh - 280px);
            padding-right: 4px;
        }

        .duty-card {
            background: white;
            border-radius: 12px;
            padding: 16px 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            border: 2px solid #f1f3f4;
            transition: all 0.2s ease;
            text-align: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .duty-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border-color: #1d9bf0;
        }

        .duty-card.has-mood {
            border-color: #4caf50;
        }

        .duty-card.has-mood::before {
            background: linear-gradient(90deg, #4caf50, #66bb6a);
        }

        .mood-display {
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 16px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
        }

        .duty-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            margin-top: 4px;
            min-height: 16px;
            position: relative;
            overflow: hidden;
            max-width: 100%;
            width: 100%;
        }

        .duty-tags.scrolling {
            width: 100%;
            max-width: 100%;
            justify-content: flex-start;
            flex-wrap: nowrap;
        }

        .duty-tags-container {
            display: flex;
            gap: 4px;
            transition: transform 0.3s ease;
            width: 100%;
            justify-content: center;
        }

        .duty-tags.scrolling .duty-tags-container {
            animation: tagScroll 8s infinite linear;
            justify-content: flex-start;
            width: max-content;
        }

        .duty-tags:hover .duty-tags-container {
            animation-play-state: paused;
        }

        @keyframes tagScroll {
            0% { transform: translateX(5%); }
            25% { transform: translateX(5%); }
            50% { transform: translateX(-50%); }
            75% { transform: translateX(-50%); }
            100% { transform: translateX(5%); }
        }

        .duty-tag {
            background: #e3f2fd;
            color: #1976d2;
            font-size: 8px;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 600;
            flex-shrink: 0;
            white-space: nowrap;
            transition: all 0.2s ease;
        }

        .duty-tag:hover {
            transform: scale(1.05);
        }

        .duty-tag.important {
            background: #fff3e0;
            color: #f57c00;
        }

        .duty-tag.easy {
            background: #e8f5e8;
            color: #2e7d32;
        }

        .duty-tag.busy {
            background: #fce4ec;
            color: #c2185b;
        }

        .duty-tag.overtime {
            background: #ffebee;
            color: #d32f2f;
        }

        .duty-tag.meeting {
            background: #f3e5f5;
            color: #7b1fa2;
        }

        .duty-tag.learning {
            background: #e8f5e8;
            color: #388e3c;
        }

        .duty-tag.team {
            background: #e1f5fe;
            color: #0277bd;
        }

        /* 心情选择弹窗 */
        .mood-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(4px);
        }

        .mood-modal.show {
            display: flex;
        }

        .mood-modal-content {
            background: white;
            border-radius: 16px;
            padding: 24px;
            max-width: 320px;
            width: 90%;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .mood-modal.show .mood-modal-content {
            transform: scale(1);
        }

        .mood-modal-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .mood-modal-date {
            font-size: 18px;
            font-weight: 700;
            color: #1d9bf0;
            margin: 0 0 4px 0;
        }

        .mood-modal-day {
            font-size: 14px;
            color: #6c757d;
            margin: 0;
        }

        .mood-selector {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .mood-option {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            padding: 12px 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }

        .mood-option:hover {
            border-color: #1d9bf0;
            background: #e3f2fd;
        }

        .mood-option.selected {
            border-color: #1d9bf0;
            background: #1d9bf0;
            color: white;
        }

        .mood-emoji {
            font-size: 20px;
            display: block;
            margin-bottom: 4px;
        }

        .mood-label {
            font-size: 10px;
            font-weight: 600;
        }

        .tags-selector {
            margin-bottom: 20px;
        }

        .tags-selector h4 {
            font-size: 14px;
            color: #495057;
            margin: 0 0 12px 0;
            font-weight: 600;
        }

        .tags-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .tag-option {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            color: #6c757d;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-weight: 500;
        }

        .tag-option:hover {
            border-color: #1d9bf0;
            color: #1d9bf0;
        }

        .tag-option.selected {
            background: #1d9bf0;
            border-color: #1d9bf0;
            color: white;
        }

        .notes-input {
            margin-bottom: 20px;
        }

        .notes-input h4 {
            font-size: 14px;
            color: #495057;
            margin: 0 0 8px 0;
            font-weight: 600;
        }

        .notes-textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            font-size: 12px;
            resize: none;
            height: 60px;
            font-family: inherit;
        }

        .notes-textarea:focus {
            outline: none;
            border-color: #1d9bf0;
            box-shadow: 0 0 0 1px #1d9bf0;
        }

        .mood-modal-actions {
            display: flex;
            gap: 12px;
        }

        .mood-btn {
            flex: 1;
            padding: 10px 16px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .mood-btn-cancel {
            background: #f8f9fa;
            color: #6c757d;
        }

        .mood-btn-cancel:hover {
            background: #e9ecef;
        }

        .mood-btn-save {
            background: #1d9bf0;
            color: white;
        }

        .mood-btn-save:hover {
            background: #1976d2;
        }

        /* 心情统计显示 */
        .mood-stats {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 12px;
            border: 1px solid #dee2e6;
        }

        .mood-stats-title {
            font-size: 12px;
            color: #6c757d;
            margin: 0 0 8px 0;
            font-weight: 600;
        }

        .mood-stats-content {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .mood-stat-item {
            text-align: center;
        }

        .mood-stat-emoji {
            font-size: 16px;
            display: block;
            margin-bottom: 2px;
        }

        .mood-stat-count {
            font-size: 10px;
            color: #6c757d;
            font-weight: 600;
        }

        /* 改进的交互提示 */
        .duty-card-action {
            position: absolute;
            top: 8px;
            left: 8px;
            width: 18px;
            height: 18px;
            background: rgba(29, 155, 240, 0.1);
            border: 1px solid rgba(29, 155, 240, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #1d9bf0;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(4px);
            cursor: pointer;
            z-index: 2;
        }

        .duty-card:hover .duty-card-action {
            opacity: 1;
            transform: scale(1.1);
            background: rgba(29, 155, 240, 0.15);
            border-color: rgba(29, 155, 240, 0.5);
        }

        .duty-card.has-mood .duty-card-action {
            background: rgba(76, 175, 80, 0.1);
            border-color: rgba(76, 175, 80, 0.3);
            color: #4caf50;
            opacity: 0.6;
        }

        .duty-card.has-mood:hover .duty-card-action {
            opacity: 1;
            background: rgba(76, 175, 80, 0.15);
            border-color: rgba(76, 175, 80, 0.5);
            transform: scale(1.1);
        }

        /* 浮动提示框 */
        .duty-card-tooltip {
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%) translateY(100%);
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 10;
            backdrop-filter: blur(8px);
        }

        .duty-card-tooltip::before {
            content: '';
            position: absolute;
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid rgba(0, 0, 0, 0.85);
        }

        .duty-card:hover .duty-card-tooltip {
            opacity: 1;
            transform: translateX(-50%) translateY(100%) translateY(6px);
        }

        .duty-card.has-mood .duty-card-tooltip {
            background: rgba(76, 175, 80, 0.9);
        }

        .duty-card.has-mood .duty-card-tooltip::before {
            border-bottom-color: rgba(76, 175, 80, 0.9);
        }

        /* 备注滚动样式 */
        .duty-notes {
            margin-top: 4px;
            font-size: 8px;
            color: #6c757d;
            text-align: center;
            line-height: 1.2;
            max-height: 16px;
            overflow: hidden;
            position: relative;
        }

        .duty-notes.scrolling {
            white-space: nowrap;
            width: 100%;
            animation: noteScroll 6s infinite linear;
        }

        .duty-notes:hover {
            animation-play-state: paused;
        }

        @keyframes noteScroll {
            0% { transform: translateX(20px); }
            25% { transform: translateX(20px); }
            75% { transform: translateX(-50px); }
            100% { transform: translateX(-50px); }
        }

        .duty-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: #1d9bf0;
        }

        .duty-card.today {
            border-color: #ff6b6b;
            transform: scale(1.02);
            box-shadow: 0 4px 16px rgba(255, 107, 107, 0.2);
        }

        .duty-card.today::before {
            background: linear-gradient(90deg, #ff6b6b, #ee5a52);
        }

        .duty-card.soon {
            border-color: #ffa726;
        }

        .duty-card.soon::before {
            background: linear-gradient(90deg, #ffa726, #ff9800);
        }

        .duty-card.today:hover {
            transform: scale(1.02) translateY(-2px);
        }

        .duty-date {
            font-size: 16px;
            font-weight: 700;
            color: #1d9bf0;
            margin: 0 0 6px 0;
            line-height: 1.2;
        }

        .duty-date.today {
            color: #ff6b6b;
        }

        .duty-date.soon {
            color: #ffa726;
        }

        .duty-day {
            font-size: 12px;
            color: #6c757d;
            margin: 0 0 8px 0;
        }

        .duty-countdown {
            background: #f8f9fa;
            color: #1d9bf0;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 600;
            margin: 0;
        }

        .duty-countdown.today {
            background: #ffebee;
            color: #ff6b6b;
        }

        .duty-countdown.soon {
            background: #fff3e0;
            color: #ffa726;
        }

        .duties-empty {
            text-align: center;
            padding: 40px 20px;
            color: #6c757d;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .duties-empty-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.6;
        }

        .duties-empty h3 {
            font-size: 14px;
            color: #495057;
            margin: 0 0 8px 0;
        }

        .duties-empty p {
            font-size: 12px;
            margin: 0;
        }

        /* 滚动条样式 */
        .duties-grid::-webkit-scrollbar {
            width: 4px;
        }

        .duties-grid::-webkit-scrollbar-track {
            background: #f1f3f4;
            border-radius: 2px;
        }

        .duties-grid::-webkit-scrollbar-thumb {
            background: #1d9bf0;
            border-radius: 2px;
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .mood-modal-content {
                padding: 20px;
                max-width: 280px;
            }

            .mood-selector {
                grid-template-columns: repeat(4, 1fr);
                gap: 8px;
            }

            .mood-option {
                padding: 8px 4px;
            }

            .mood-emoji {
                font-size: 18px;
            }

            .mood-label {
                font-size: 9px;
            }

            .mood-display {
                font-size: 14px;
                width: 20px;
                height: 20px;
            }

            .duty-card-action {
                width: 16px;
                height: 16px;
                font-size: 9px;
            }

            .duty-notes {
                font-size: 7px;
                max-height: 14px;
            }

            .duties-container {
                padding: 12px;
                max-height: calc(100vh - 140px);
            }

            .duties-header {
                padding: 12px 16px;
                margin-bottom: 12px;
            }

            .duties-header h3 {
                font-size: 16px;
            }

            .duties-header p {
                font-size: 12px;
                margin-bottom: 10px;
            }

            .add-to-calendar-btn {
                padding: 6px 12px;
                font-size: 11px;
                border-radius: 16px;
                gap: 4px;
            }

            .calendar-icon {
                font-size: 12px;
            }

            .duties-grid {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                gap: 10px;
                max-height: calc(100vh - 240px);
            }

            .duty-card {
                padding: 12px 10px;
            }

            .duty-date {
                font-size: 14px;
            }

            .duty-day {
                font-size: 11px;
            }

            .duty-countdown {
                font-size: 9px;
                padding: 3px 6px;
            }

            .duties-empty {
                padding: 30px 16px;
            }

            .duties-empty-icon {
                font-size: 36px;
            }

            .duties-empty h3 {
                font-size: 14px;
            }

            .duties-empty p {
                font-size: 12px;
            }

            @keyframes noteScroll {
                0% { transform: translateX(15px); }
                25% { transform: translateX(15px); }
                75% { transform: translateX(-30px); }
                100% { transform: translateX(-30px); }
            }

            @keyframes tagScroll {
                0% { transform: translateX(0); }
                25% { transform: translateX(0); }
                50% { transform: translateX(-30px); }
                75% { transform: translateX(-30px); }
                100% { transform: translateX(0); }
            }
        }

        /* 超小屏幕 */
        @media (max-width: 480px) {
            .duties-grid {
                grid-template-columns: repeat(2, 1fr);
                max-height: calc(100vh - 220px);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 周期选择页面 -->
        <div id="cycleSelection" class="cycle-selection">
            <!-- 顶部栏 -->
            <div class="header cycle-header">
                <div class="header-title">
                    <h1>值班管理系统</h1>
                    <p>选择您的值班周期</p>
                </div>
            </div>
            
            <div class="content-wrapper">
                <div style="padding: 24px; width: 100%; max-width: 500px;">
                    <h2 style="margin: 0 0 8px 0; font-size: 20px; font-weight: 700; color: #0f1419; text-align: center;">选择值班周期</h2>
                    <p style="color: #536471; margin: 0 0 24px 0; font-size: 14px; text-align: center;">请选择您的值班周期天数，系统将根据此周期计算所有值班安排</p>
                    
                    <div class="cycle-options">
                    <div class="cycle-option" onclick="selectCycle(3)">
                        <div class="cycle-number">3</div>
                        <div class="cycle-info">
                            <div class="cycle-label">三天周期</div>
                            <div class="cycle-description">每3天值班一次</div>
                        </div>
                    </div>
                    <div class="cycle-option" onclick="selectCycle(5)">
                        <div class="cycle-number">5</div>
                        <div class="cycle-info">
                            <div class="cycle-label">五天周期</div>
                            <div class="cycle-description">每5天值班一次</div>
                        </div>
                    </div>
                    <div class="cycle-option" onclick="selectCycle(7)">
                        <div class="cycle-number">7</div>
                        <div class="cycle-info">
                            <div class="cycle-label">七天周期</div>
                            <div class="cycle-description">每周值班一次</div>
                        </div>
                    </div>
                    <div class="cycle-option" onclick="selectCycle(9)">
                        <div class="cycle-number">9</div>
                        <div class="cycle-info">
                            <div class="cycle-label">九天周期</div>
                            <div class="cycle-description">每9天值班一次</div>
                        </div>
                    </div>
                    <div class="cycle-option" onclick="selectCycle(14)">
                        <div class="cycle-number">14</div>
                        <div class="cycle-info">
                            <div class="cycle-label">双周周期</div>
                            <div class="cycle-description">每两周值班一次</div>
                        </div>
                    </div>
                    <div class="cycle-option" onclick="selectCycle(30)">
                        <div class="cycle-number">30</div>
                        <div class="cycle-info">
                            <div class="cycle-label">月度周期</div>
                            <div class="cycle-description">每月值班一次</div>
                        </div>
                    </div>
                </div>

                    <div class="custom-cycle">
                        <h3>自定义周期</h3>
                        <div class="custom-input-group">
                            <span>每</span>
                            <input type="number" class="custom-input" id="customCycleDays" min="1" max="365" placeholder="" oninput="updateCustomCycle()">
                            <span>天值班一次</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部确认栏 -->
            <div class="cycle-bottom-bar">
                <button class="confirm-cycle-btn" onclick="confirmCycle()" disabled>确认选择</button>
            </div>
        </div>

        <!-- 主系统界面 -->
        <div id="mainSystem" class="main-system">
            <!-- 顶部栏 -->
            <div class="header">
                <div class="header-title">
                    <h1>值班管理系统</h1>
                    <p>每 <span id="currentCycleDays">0</span> 天值班一次</p>
                </div>
                <button class="cycle-setting-btn" onclick="changeCycle()">
                    更改周期
                </button>
            </div>

            <!-- Tab内容区域 -->
            <div class="content">
                <!-- Tab1: 设置与查询 -->
                <div id="tab1" class="tab-content active">
                    <div class="section">
                        <h2>设置基准值班时间</h2>
                        <div class="form-group">
                            <label for="baseDate">请选择一个已知的值班日期：</label>
                            <input type="date" id="baseDate" />
                        </div>
                        <button class="btn" onclick="setBaseDate()">设置基准时间</button>
                        <div id="baseResult"></div>
                    </div>

                    <div class="section">
                        <h2>查询值班状态</h2>
                        <div class="form-group">
                            <label for="queryDate">请选择要查询的日期：</label>
                            <input type="date" id="queryDate" />
                        </div>
                        <button class="btn btn-query" onclick="queryDutyStatus()">查询值班状态</button>
                        <div id="queryResult"></div>
                    </div>

                    <div class="info">
                        <h3>📝 使用说明</h3>
                        <p><strong>1. 设置基准时间：</strong> 选择一个您确定值班的日期作为基准。</p>
                        <p><strong>2. 查询功能：</strong> 系统会根据基准日期，按您设定的周期计算任意日期的值班状态。</p>
                        <p><strong>3. 计算逻辑：</strong> 从基准日期开始，每隔设定天数为一个值班日。</p>
                    </div>
                </div>

                <!-- Tab2: 近期值班 -->
                <div id="tab2" class="tab-content">
                    <div class="section">
                        <h2>近期值班时间</h2>
                        <div id="upcomingDuties"></div>
                    </div>
                </div>

                <!-- Tab3: 日历 -->
                <div id="tab3" class="tab-content">
                    <div class="section">
                        <h2>值班日历</h2>
                        <div class="calendar-controls">
                            <button class="btn-nav" onclick="changeMonth(-1)">◀ 上月</button>
                            <h3 id="calendarTitle"></h3>
                            <button class="btn-nav" onclick="changeMonth(1)">下月 ▶</button>
                        </div>
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="bottom-nav">
                <div class="nav-item active" onclick="switchTab(1)">
                    <div class="nav-icon">⚙️</div>
                    <div class="nav-label">设置查询</div>
                </div>
                <div class="nav-item" onclick="switchTab(2)">
                    <div class="nav-icon">📅</div>
                    <div class="nav-label">近期值班</div>
                </div>
                <div class="nav-item" onclick="switchTab(3)">
                    <div class="nav-icon">🗓️</div>
                    <div class="nav-label">日历</div>
                </div>
            </div>
        </div>

        <!-- 心情选择弹窗 -->
        <div id="moodModal" class="mood-modal">
            <div class="mood-modal-content">
                <div class="mood-modal-header">
                    <div class="mood-modal-date" id="modalDutyDate"></div>
                    <div class="mood-modal-day" id="modalDutyDay"></div>
                </div>

                <div class="mood-selector">
                    <div class="mood-option" data-mood="😊" data-label="开心">
                        <span class="mood-emoji">😊</span>
                        <span class="mood-label">开心</span>
                    </div>
                    <div class="mood-option" data-mood="😴" data-label="疲惫">
                        <span class="mood-emoji">😴</span>
                        <span class="mood-label">疲惫</span>
                    </div>
                    <div class="mood-option" data-mood="😤" data-label="忙碌">
                        <span class="mood-emoji">😤</span>
                        <span class="mood-label">忙碌</span>
                    </div>
                    <div class="mood-option" data-mood="😌" data-label="轻松">
                        <span class="mood-emoji">😌</span>
                        <span class="mood-label">轻松</span>
                    </div>
                    <div class="mood-option" data-mood="🔥" data-label="动力">
                        <span class="mood-emoji">🔥</span>
                        <span class="mood-label">动力</span>
                    </div>
                    <div class="mood-option" data-mood="😷" data-label="不适">
                        <span class="mood-emoji">😷</span>
                        <span class="mood-label">不适</span>
                    </div>
                    <div class="mood-option" data-mood="😎" data-label="自信">
                        <span class="mood-emoji">😎</span>
                        <span class="mood-label">自信</span>
                    </div>
                    <div class="mood-option" data-mood="😮‍💨" data-label="无奈">
                        <span class="mood-emoji">😮‍💨</span>
                        <span class="mood-label">无奈</span>
                    </div>
                    <div class="mood-option" data-mood="🤔" data-label="思考">
                        <span class="mood-emoji">🤔</span>
                        <span class="mood-label">思考</span>
                    </div>
                    <div class="mood-option" data-mood="⚡" data-label="高效">
                        <span class="mood-emoji">⚡</span>
                        <span class="mood-label">高效</span>
                    </div>
                </div>

                <div class="tags-selector">
                    <h4>快速标签</h4>
                    <div class="tags-options">
                        <div class="tag-option" data-tag="important">重要</div>
                        <div class="tag-option" data-tag="easy">轻松</div>
                        <div class="tag-option" data-tag="busy">繁忙</div>
                        <div class="tag-option" data-tag="overtime">加班</div>
                        <div class="tag-option" data-tag="meeting">会议多</div>
                        <div class="tag-option" data-tag="learning">学习</div>
                        <div class="tag-option" data-tag="team">团队</div>
                    </div>
                </div>

                <div class="notes-input">
                    <h4>值班备注</h4>
                    <textarea id="dutyNotes" class="notes-textarea" placeholder="记录这次值班的感想或重要事项..."></textarea>
                </div>

                <div class="mood-modal-actions">
                    <button class="mood-btn mood-btn-cancel" onclick="closeMoodModal()">取消</button>
                    <button class="mood-btn mood-btn-save" onclick="saveDutyMood()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let baseDate = null;
        let currentCalendarDate = new Date();
        let dutyCycleDays = 0; // 值班周期天数
        let selectedCycle = 0;
        let currentTab = 1; // 当前选中的tab
        let currentMoodDate = null; // 当前选择心情的日期
        let selectedMood = null; // 选中的心情
        let selectedTags = []; // 选中的标签
        let dutyMoods = {}; // 存储心情数据 {dateString: {mood, tags, notes}}

        // 页面加载时恢复心情数据
        function loadMoodData() {
            const savedMoods = localStorage.getItem('dutyMoods');
            if (savedMoods) {
                dutyMoods = JSON.parse(savedMoods);
            }
        }

        // 保存心情数据到本地存储
        function saveMoodData() {
            localStorage.setItem('dutyMoods', JSON.stringify(dutyMoods));
        }

        // 安全的日期解析函数，避免时区问题
        function parseLocalDate(dateString) {
            const parts = dateString.split('-');
            // 注意：月份需要减1，因为JavaScript的月份是0-11
            return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
        }

        // 选择预设周期
        function selectCycle(days) {
            // 移除所有选中状态
            document.querySelectorAll('.cycle-option').forEach(option => {
                option.classList.remove('selected');
            });
            
            // 移除自定义周期的激活状态
            document.querySelector('.custom-cycle').classList.remove('active');
            
            // 选中当前选项
            event.target.closest('.cycle-option').classList.add('selected');
            
            selectedCycle = days;
            document.getElementById('customCycleDays').value = '';
            
            // 启用确认按钮
            const confirmBtn = document.querySelector('.confirm-cycle-btn');
            confirmBtn.disabled = false;
            confirmBtn.textContent = `确认选择 ${days} 天周期`;
        }

        // 更新自定义周期
        function updateCustomCycle() {
            const customDays = parseInt(document.getElementById('customCycleDays').value);
            const confirmBtn = document.querySelector('.confirm-cycle-btn');
            const customCycle = document.querySelector('.custom-cycle');
            
            // 移除所有预设选项的选中状态
            document.querySelectorAll('.cycle-option').forEach(option => {
                option.classList.remove('selected');
            });
            
            if (customDays && customDays > 0 && customDays <= 365) {
                selectedCycle = customDays;
                confirmBtn.disabled = false;
                confirmBtn.textContent = `确认选择 ${customDays} 天周期`;
                customCycle.classList.add('active');
            } else {
                selectedCycle = 0;
                confirmBtn.disabled = true;
                confirmBtn.textContent = '确认选择';
                customCycle.classList.remove('active');
            }
        }

        // 确认周期选择
        function confirmCycle() {
            if (selectedCycle > 0) {
                dutyCycleDays = selectedCycle;
                
                // 保存周期到本地存储
                localStorage.setItem('dutyCycleDays', dutyCycleDays.toString());
                
                // 隐藏周期选择页面，显示主系统
                document.getElementById('cycleSelection').style.display = 'none';
                document.getElementById('mainSystem').style.display = 'block';
                
                // 滚动到页面顶部
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                
                // 更新显示信息
                document.getElementById('currentCycleDays').textContent = dutyCycleDays;
                
                // 初始化主系统
                initializeMainSystem();
            }
        }

        // 更改周期
        function changeCycle() {
            // 清除相关数据
            localStorage.removeItem('dutyCycleDays');
            localStorage.removeItem('dutyBaseDate');
            localStorage.removeItem('dutyMoods'); // 清除心情数据
            
            // 重置状态
            baseDate = null;
            selectedCycle = 0;
            dutyMoods = {}; // 重置心情数据
            
            // 清除界面显示
            document.getElementById('baseDate').value = '';
            document.getElementById('baseResult').innerHTML = '';
            document.getElementById('queryDate').value = '';
            document.getElementById('queryResult').innerHTML = '';
            document.getElementById('upcomingDuties').innerHTML = '';
            
            // 重置日历控件状态
            const calendarControls = document.querySelector('.calendar-controls');
            if (calendarControls) {
                calendarControls.style.display = 'none';
            }
            
            // 隐藏主系统，显示周期选择
            document.getElementById('mainSystem').style.display = 'none';
            document.getElementById('cycleSelection').style.display = 'block';
            
            // 滚动到页面顶部
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
            
            // 重置选择状态
            document.querySelectorAll('.cycle-option').forEach(option => {
                option.classList.remove('selected');
            });
            document.querySelector('.custom-cycle').classList.remove('active');
            document.getElementById('customCycleDays').value = '';
            document.querySelector('.confirm-cycle-btn').disabled = true;
            document.querySelector('.confirm-cycle-btn').textContent = '确认选择';
            
            // 显示清除提示
            showToast('周期已重置，心情数据已清除');
        }

        // 初始化主系统
        function initializeMainSystem() {
            // 恢复保存的基准日期
            const savedBaseDate = localStorage.getItem('dutyBaseDate');
            if (savedBaseDate) {
                document.getElementById('baseDate').value = savedBaseDate;
                baseDate = parseLocalDate(savedBaseDate);
                document.getElementById('baseResult').innerHTML = `
                    <div class="result on-duty">
                        <span class="status-indicator on"></span>
                        基准值班时间：${formatDate(baseDate)}
                    </div>
                `;
                updateUpcomingDuties();
            }
            
            // 设置查询日期默认为今天
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            const todayString = `${year}-${month}-${day}`;
            document.getElementById('queryDate').value = todayString;
            
            // 初始化相关显示
            updateUpcomingDuties();
            updateCalendar();
            
            // 默认显示第一个tab
            switchTab(1);
        }

        // 设置基准值班时间
        function setBaseDate() {
            const baseDateInput = document.getElementById('baseDate');
            const selectedDate = baseDateInput.value;
            
            if (!selectedDate) {
                showToast('请选择一个基准值班日期！', true);
                return;
            }
            
            baseDate = parseLocalDate(selectedDate);
            
            // 清除已有的心情数据（因为基准时间变了，值班日期可能会发生变化）
            dutyMoods = {};
            localStorage.removeItem('dutyMoods');
            
            // 保存到本地存储
            localStorage.setItem('dutyBaseDate', selectedDate);
            
            // 显示结果
            document.getElementById('baseResult').innerHTML = `
                <div class="result on-duty">
                    <span class="status-indicator on"></span>
                    基准值班时间：${formatDate(baseDate)} 已设置成功！
                </div>
            `;
            
            // 显示成功提示
            showToast('基准时间设置成功！心情数据已重置');
            
            // 更新相关显示
            updateUpcomingDuties();
            updateCalendar();
            
            // 如果当前在其他tab，更新对应内容
            if (currentTab === 2) {
                updateUpcomingDuties();
            } else if (currentTab === 3) {
                updateCalendar();
            }
        }

        // 查询值班状态
        function queryDutyStatus() {
            const queryDateInput = document.getElementById('queryDate');
            const selectedDate = queryDateInput.value;
            
            if (!selectedDate) {
                showToast('请选择要查询的日期！', true);
                return;
            }
            
            if (!baseDate) {
                showToast('请先设置基准值班时间！', true);
                return;
            }
            
            const queryDate = parseLocalDate(selectedDate);
            const isOnDuty = checkDutyStatus(queryDate);
            
            const resultContainer = document.getElementById('queryResult');
            const dayName = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][queryDate.getDay()];
            
            if (isOnDuty) {
                resultContainer.innerHTML = `
                    <div class="result on-duty">
                        <span class="status-indicator on"></span>
                        ${formatDate(queryDate)} (${dayName}) 需要值班
                    </div>
                `;
            } else {
                // 计算距离下一个值班日的天数
                const nextDuty = getNextDutyDate(queryDate);
                const daysDiff = Math.ceil((nextDuty - queryDate) / (1000 * 60 * 60 * 24));
                
                resultContainer.innerHTML = `
                    <div class="result off-duty">
                        <span class="status-indicator off"></span>
                        ${formatDate(queryDate)} (${dayName}) 无需值班<br>
                        <small>下一个值班日：${formatDate(nextDuty)} (${daysDiff}天后)</small>
                    </div>
                `;
            }
        }

        // 检查指定日期是否值班
        function checkDutyStatus(date) {
            if (!baseDate || !dutyCycleDays) return false;
            
            // 确保两个日期都重置到当天开始
            const checkDate = new Date(date);
            checkDate.setHours(0, 0, 0, 0);
            
            const refDate = new Date(baseDate);
            refDate.setHours(0, 0, 0, 0);
            
            const timeDiff = checkDate.getTime() - refDate.getTime();
            const daysDiff = Math.round(timeDiff / (1000 * 60 * 60 * 24));
            
            // 如果是未来日期或过去日期，都按周期计算
            return daysDiff % dutyCycleDays === 0;
        }

        // 获取下一个值班日
        function getNextDutyDate(date) {
            if (!baseDate || !dutyCycleDays) return null;
            
            // 确保日期重置到当天开始
            const checkDate = new Date(date);
            checkDate.setHours(0, 0, 0, 0);
            
            const refDate = new Date(baseDate);
            refDate.setHours(0, 0, 0, 0);
            
            const timeDiff = checkDate.getTime() - refDate.getTime();
            const daysDiff = Math.round(timeDiff / (1000 * 60 * 60 * 24));
            const remainder = daysDiff % dutyCycleDays;
            
            let daysToNext;
            if (remainder === 0) {
                daysToNext = dutyCycleDays; // 如果当天就是值班日，下一个是周期天数后
            } else if (remainder > 0) {
                daysToNext = dutyCycleDays - remainder;
            } else {
                daysToNext = -remainder;
            }
            
            const nextDate = new Date(checkDate);
            nextDate.setDate(checkDate.getDate() + daysToNext);
            return nextDate;
        }

        // 获取上一个值班日
        function getPreviousDutyDate(date) {
            if (!baseDate || !dutyCycleDays) return null;
            
            // 确保日期重置到当天开始
            const checkDate = new Date(date);
            checkDate.setHours(0, 0, 0, 0);
            
            const refDate = new Date(baseDate);
            refDate.setHours(0, 0, 0, 0);
            
            const timeDiff = checkDate.getTime() - refDate.getTime();
            const daysDiff = Math.round(timeDiff / (1000 * 60 * 60 * 24));
            const remainder = daysDiff % dutyCycleDays;
            
            let daysToPrev;
            if (remainder === 0) {
                daysToPrev = 0; // 如果当天就是值班日
            } else if (remainder > 0) {
                daysToPrev = remainder;
            } else {
                daysToPrev = dutyCycleDays + remainder; // remainder是负数
            }
            
            const prevDate = new Date(checkDate);
            prevDate.setDate(checkDate.getDate() - daysToPrev);
            return prevDate;
        }

        // 更新近期值班时间预览
        function updateUpcomingDuties() {
            const upcomingContainer = document.getElementById('upcomingDuties');
            
            if (!baseDate || !dutyCycleDays) {
                upcomingContainer.innerHTML = `
                    <div class="baseline-prompt">
                        <div class="baseline-prompt-icon">📅</div>
                        <h3>需要设置基准时间</h3>
                        <p>请先在"设置查询"页面设置一个基准值班时间<br>系统将根据基准时间计算您的近期值班安排</p>
                        <button class="baseline-prompt-btn" onclick="switchTab(1)">前往设置</button>
                    </div>
                `;
                return;
            }
            
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            const duties = [];
            
            // 根据周期智能确定查询范围，确保有足够的值班日
            let searchDays = Math.max(dutyCycleDays * 6, 60); // 至少显示6个周期或60天
            searchDays = Math.min(searchDays, 120); // 最多120天
            
            for (let i = 0; i < searchDays; i++) {
                const checkDate = new Date(today);
                checkDate.setDate(today.getDate() + i);
                
                if (checkDutyStatus(checkDate)) {
                    duties.push(checkDate);
                }
            }
            
            if (duties.length === 0) {
                // 如果范围内没有值班日，找下一个值班日
                const nextDuty = getNextDutyDate(today);
                if (nextDuty) {
                    duties.push(nextDuty);
                }
            }
            
            if (duties.length === 0) {
                upcomingContainer.innerHTML = `
                    <div class="duties-container">
                        <div class="duties-empty">
                            <div class="duties-empty-icon">📅</div>
                            <h3>暂无近期值班安排</h3>
                            <p>请检查基准时间设置是否正确</p>
                        </div>
                    </div>
                `;
                return;
            }
            
            // 智能限制显示数量，确保一屏显示
            const maxDuties = window.innerWidth > 768 ? 12 : 8; // 桌面端12个，移动端8个
            const displayDuties = duties.slice(0, maxDuties);
            
            // 计算心情统计
            const moodStats = calculateMoodStats(displayDuties);
            
            // 计算统计信息
            const nextDutyDays = Math.ceil((displayDuties[0] - today) / (1000 * 60 * 60 * 24));
            const totalDuties = displayDuties.length;
            const dutyPeriod = displayDuties.length > 1 ? 
                Math.ceil((displayDuties[displayDuties.length - 1] - displayDuties[0]) / (1000 * 60 * 60 * 24)) + 1 : 1;
            
            let gridHtml = `
                <div class="duties-container">
                    <div class="duties-header">
                        <h3>📅 值班时间表</h3>
                        <p>未来 ${dutyPeriod} 天内共 ${totalDuties} 个值班日 • 下次还有 ${nextDutyDays} 天</p>
                        <button class="add-to-calendar-btn" onclick="addDutiesToCalendar()">
                            <span class="calendar-icon">📱</span>
                            添加到日历
                        </button>
                    </div>
            `;
            
            // 添加心情统计（如果有心情数据）
            if (moodStats.total > 0) {
                gridHtml += `
                    <div class="mood-stats">
                        <div class="mood-stats-title">🎭 最近心情统计</div>
                        <div class="mood-stats-content">
                `;
                
                Object.entries(moodStats.moods).forEach(([mood, count]) => {
                    gridHtml += `
                        <div class="mood-stat-item">
                            <span class="mood-stat-emoji">${mood}</span>
                            <span class="mood-stat-count">${count}</span>
                        </div>
                    `;
                });
                
                gridHtml += `
                        </div>
                    </div>
                `;
            }
            
            gridHtml += `<div class="duties-grid">`;
            
            displayDuties.forEach((date, index) => {
                const isToday = date.getTime() === today.getTime();
                const dayName = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];
                const daysFromToday = Math.ceil((date - today) / (1000 * 60 * 60 * 24));
                const dateString = date.toISOString().split('T')[0];
                const moodData = dutyMoods[dateString];
                
                let cardClass = '';
                let dateClass = '';
                let countdownClass = '';
                let countdownText = '';
                
                if (isToday) {
                    cardClass = 'today';
                    dateClass = 'today';
                    countdownClass = 'today';
                    countdownText = '今日值班';
                } else if (daysFromToday <= 3) {
                    cardClass = 'soon';
                    dateClass = 'soon';
                    countdownClass = 'soon';
                    countdownText = daysFromToday === 1 ? '明天' : `${daysFromToday}天后`;
                } else {
                    countdownText = `${daysFromToday}天后`;
                }
                
                // 如果有心情数据，添加has-mood类
                if (moodData) {
                    cardClass += ' has-mood';
                }
                
                // 格式化日期显示（去掉年份，更紧凑）
                const formattedDate = `${date.getMonth() + 1}/${date.getDate()}`;
                
                // 心情显示
                let moodDisplay = '';
                if (moodData && moodData.mood) {
                    moodDisplay = `<div class="mood-display">${moodData.mood}</div>`;
                }
                
                // 标签显示
                let tagsDisplay = '';
                if (moodData && moodData.tags && moodData.tags.length > 0) {
                    if (moodData.tags.length > 2) {
                        // 多标签时使用轮播
                        tagsDisplay = '<div class="duty-tags scrolling">';
                        tagsDisplay += '<div class="duty-tags-container">';
                        moodData.tags.forEach(tag => {
                            tagsDisplay += `<div class="duty-tag ${tag}">${getTagName(tag)}</div>`;
                        });
                        // 重复一遍标签用于无缝轮播
                        moodData.tags.forEach(tag => {
                            tagsDisplay += `<div class="duty-tag ${tag}">${getTagName(tag)}</div>`;
                        });
                        tagsDisplay += '</div></div>';
                    } else {
                        // 少标签时正常显示
                        tagsDisplay = '<div class="duty-tags">';
                        tagsDisplay += '<div class="duty-tags-container">';
                        moodData.tags.forEach(tag => {
                            tagsDisplay += `<div class="duty-tag ${tag}">${getTagName(tag)}</div>`;
                        });
                        tagsDisplay += '</div></div>';
                    }
                }

                // 备注滚动显示（如果有备注且较长）
                let notesDisplay = '';
                if (moodData && moodData.notes && moodData.notes.trim()) {
                    const notes = moodData.notes.trim();
                    if (notes.length > 10) {
                        notesDisplay = `<div class="duty-notes scrolling">${notes}</div>`;
                    } else {
                        notesDisplay = `<div class="duty-notes">${notes}</div>`;
                    }
                }
                
                gridHtml += `
                    <div class="duty-card ${cardClass}" onclick="openMoodModal('${dateString}')">
                        ${moodDisplay}
                        <div class="duty-date ${dateClass}">${formattedDate}</div>
                        <div class="duty-day">${dayName}</div>
                        <div class="duty-countdown ${countdownClass}">${countdownText}</div>
                        ${tagsDisplay}
                        ${notesDisplay}
                        <div class="duty-card-action">${getMoodEmoji(moodData?.mood)}</div>
                        <div class="duty-card-tooltip">${getMoodDescription(moodData?.mood)}</div>
                    </div>
                `;
            });
            
            gridHtml += `
                    </div>
                </div>
            `;
            
            upcomingContainer.innerHTML = gridHtml;
        }

        // 计算心情统计
        function calculateMoodStats(duties) {
            const stats = { total: 0, moods: {} };
            
            duties.forEach(date => {
                const dateString = date.toISOString().split('T')[0];
                const moodData = dutyMoods[dateString];
                if (moodData && moodData.mood) {
                    stats.total++;
                    stats.moods[moodData.mood] = (stats.moods[moodData.mood] || 0) + 1;
                }
            });
            
            return stats;
        }

        // 获取标签名称
        function getTagName(tag) {
            const tagNames = {
                important: '重要',
                easy: '轻松',
                busy: '繁忙',
                overtime: '加班',
                meeting: '会议',
                learning: '学习',
                team: '团队'
            };
            return tagNames[tag] || tag;
        }

        // 格式化日期显示
        function formatDate(date) {
            if (!date) return '';
            return date.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
        }

        // 更新日历显示
        function updateCalendar() {
            const calendarContainer = document.getElementById('calendar');
            const calendarTitle = document.getElementById('calendarTitle');
            const calendarControls = document.querySelector('.calendar-controls');
            
            if (!baseDate || !dutyCycleDays) {
                calendarTitle.textContent = '值班日历';
                // 隐藏月份导航按钮
                calendarControls.style.display = 'none';
                calendarContainer.innerHTML = `
                    <div class="baseline-prompt">
                        <div class="baseline-prompt-icon">🗓️</div>
                        <h3>需要设置基准时间</h3>
                        <p>请先在"设置查询"页面设置一个基准值班时间<br>系统将根据基准时间在日历中显示您的值班安排</p>
                        <button class="baseline-prompt-btn" onclick="switchTab(1)">前往设置</button>
                    </div>
                `;
                return;
            }
            
            // 显示月份导航按钮
            calendarControls.style.display = 'flex';
            
            // 设置标题
            const year = currentCalendarDate.getFullYear();
            const month = currentCalendarDate.getMonth();
            const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', 
                              '七月', '八月', '九月', '十月', '十一月', '十二月'];
            calendarTitle.textContent = `${year}年 ${monthNames[month]}`;

            // 创建日历网格
            let calendarHtml = '<div class="calendar-grid">';
            
            // 添加星期标题
            const dayHeaders = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
            dayHeaders.forEach(day => {
                calendarHtml += `<div class="calendar-header">${day}</div>`;
            });

            // 获取当月第一天和最后一天
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const startDate = new Date(firstDay);
            startDate.setDate(startDate.getDate() - firstDay.getDay()); // 从周日开始

            // 生成6周的日历
            const today = new Date();
            today.setHours(0, 0, 0, 0); // 重置时间到当天开始
            
            for (let week = 0; week < 6; week++) {
                for (let day = 0; day < 7; day++) {
                    const currentDay = new Date(startDate);
                    currentDay.setDate(startDate.getDate() + (week * 7) + day);
                    currentDay.setHours(0, 0, 0, 0); // 重置时间到当天开始
                    
                    const isCurrentMonth = currentDay.getMonth() === month;
                    const isToday = currentDay.getTime() === today.getTime();
                    const isOnDuty = baseDate && dutyCycleDays ? checkDutyStatus(currentDay) : false;
                    
                    let classes = ['calendar-day'];
                    if (!isCurrentMonth) classes.push('other-month');
                    if (isToday) classes.push('today');
                    if (isOnDuty) classes.push('on-duty');

                    let dutyText = '';
                    if (isCurrentMonth) {
                        if (isOnDuty && isToday) {
                            dutyText = '<div class="duty-indicator scrolling"><span class="scroll-text">今日值班</span></div>';
                        } else if (isToday) {
                            dutyText = '<div class="duty-indicator">今日</div>';
                        } else if (isOnDuty) {
                            dutyText = '<div class="duty-indicator">值班</div>';
                        } else if (baseDate && dutyCycleDays) {
                            dutyText = '<div class="duty-indicator">休息</div>';
                        }
                    }

                    calendarHtml += `
                        <div class="${classes.join(' ')}" onclick="onCalendarDayClick('${currentDay.toISOString().split('T')[0]}')">
                            <div class="day-number">${currentDay.getDate()}</div>
                            ${dutyText}
                        </div>
                    `;
                }
            }

            calendarHtml += '</div>';

            // 检查今天是否值班
            const todayIsOnDuty = checkDutyStatus(today);
            
            // 添加图例
            calendarHtml += `
                <div class="calendar-legend">
                    <div class="legend-item">
                        <div class="legend-color duty"></div>
                        <span>值班日</span>
                    </div>`;
            
            if (todayIsOnDuty) {
                calendarHtml += `
                    <div class="legend-item">
                        <div class="legend-color today-duty"></div>
                        <span>今日值班</span>
                    </div>`;
            } else {
                calendarHtml += `
                    <div class="legend-item">
                        <div class="legend-color today"></div>
                        <span>今天</span>
                    </div>`;
            }
            
            calendarHtml += `
                    <div class="legend-item">
                        <div class="legend-color normal"></div>
                        <span>休息日</span>
                    </div>
                </div>
            `;

            calendarContainer.innerHTML = calendarHtml;
        }

        // 切换月份
        function changeMonth(delta) {
            // 如果没有基准时间，不允许切换月份
            if (!baseDate || !dutyCycleDays) {
                return;
            }
            
            currentCalendarDate.setMonth(currentCalendarDate.getMonth() + delta);
            updateCalendar();
        }

        // 点击日历日期
        function onCalendarDayClick(dateString) {
            document.getElementById('queryDate').value = dateString;
            queryDutyStatus();
        }

        // 切换Tab
        function switchTab(tabNumber) {
            // 移除所有tab的active状态
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelectorAll('.nav-item').forEach(nav => {
                nav.classList.remove('active');
            });
            
            // 激活选中的tab
            document.getElementById(`tab${tabNumber}`).classList.add('active');
            document.querySelectorAll('.nav-item')[tabNumber - 1].classList.add('active');
            
            currentTab = tabNumber;
            
            // 如果切换到日历tab，更新日历显示
            if (tabNumber === 3) {
                updateCalendar();
            }
            
            // 如果切换到近期值班tab，更新近期值班显示
            if (tabNumber === 2) {
                updateUpcomingDuties();
            }
        }

        // 显示操作反馈提示
        function showToast(message, isError = false) {
            // 移除已存在的提示框
            const existingToast = document.querySelector('.feedback-toast');
            if (existingToast) {
                existingToast.remove();
            }

            // 创建新的提示框
            const toast = document.createElement('div');
            toast.className = `feedback-toast ${isError ? 'error' : ''}`;
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            // 显示动画
            setTimeout(() => {
                toast.classList.add('show');
            }, 100);
            
            // 自动隐藏
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => {
                    if (toast.parentNode) {
                        toast.parentNode.removeChild(toast);
                    }
                }, 300);
            }, 2500);
        }

        // 禁止双击缩放
        let lastTouchEnd = 0;
        document.addEventListener('touchend', function (event) {
            let now = (new Date()).getTime();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);

        // 禁止双击事件
        document.addEventListener('dblclick', function(event) {
            event.preventDefault();
        }, false);

        // 页面加载时的初始化
        window.onload = function() {
            // 加载心情数据
            loadMoodData();
            
            // 检查是否已经设置了周期
            const savedCycle = localStorage.getItem('dutyCycleDays');
            
            if (savedCycle) {
                // 已设置周期，直接进入主系统
                dutyCycleDays = parseInt(savedCycle);
                document.getElementById('cycleSelection').style.display = 'none';
                document.getElementById('mainSystem').style.display = 'block';
                document.getElementById('currentCycleDays').textContent = dutyCycleDays;
                
                initializeMainSystem();
            } else {
                // 未设置周期，显示周期选择页面
                document.getElementById('cycleSelection').style.display = 'block';
                document.getElementById('mainSystem').style.display = 'none';
            }
        };

        // 打开心情选择弹窗
        function openMoodModal(dateString) {
            currentMoodDate = dateString;
            const date = new Date(dateString + 'T00:00:00');
            const dayName = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];
            
            // 设置弹窗标题
            document.getElementById('modalDutyDate').textContent = formatDate(date);
            document.getElementById('modalDutyDay').textContent = dayName;
            
            // 恢复已保存的心情数据
            const existingData = dutyMoods[dateString];
            
            // 重置选择状态
            selectedMood = null;
            selectedTags = [];
            
            // 清除所有选中状态
            document.querySelectorAll('.mood-option').forEach(option => {
                option.classList.remove('selected');
            });
            document.querySelectorAll('.tag-option').forEach(option => {
                option.classList.remove('selected');
            });
            
            // 恢复已保存的数据
            if (existingData) {
                if (existingData.mood) {
                    selectedMood = existingData.mood;
                    const moodOption = document.querySelector(`[data-mood="${existingData.mood}"]`);
                    if (moodOption) {
                        moodOption.classList.add('selected');
                    }
                }
                
                if (existingData.tags) {
                    selectedTags = [...existingData.tags];
                    existingData.tags.forEach(tag => {
                        const tagOption = document.querySelector(`[data-tag="${tag}"]`);
                        if (tagOption) {
                            tagOption.classList.add('selected');
                        }
                    });
                }
                
                if (existingData.notes) {
                    document.getElementById('dutyNotes').value = existingData.notes;
                } else {
                    document.getElementById('dutyNotes').value = '';
                }
            } else {
                document.getElementById('dutyNotes').value = '';
            }
            
            // 显示弹窗
            document.getElementById('moodModal').classList.add('show');
        }

        // 关闭心情选择弹窗
        function closeMoodModal() {
            document.getElementById('moodModal').classList.remove('show');
            currentMoodDate = null;
            selectedMood = null;
            selectedTags = [];
        }

        // 保存值班心情
        function saveDutyMood() {
            if (!currentMoodDate) return;
            
            const notes = document.getElementById('dutyNotes').value.trim();
            
            // 构建心情数据
            const moodData = {
                mood: selectedMood,
                tags: selectedTags,
                notes: notes,
                updatedAt: new Date().toISOString()
            };
            
            // 保存到内存和本地存储
            dutyMoods[currentMoodDate] = moodData;
            saveMoodData();
            
            // 关闭弹窗
            closeMoodModal();
            
            // 更新显示
            updateUpcomingDuties();
            
            // 显示成功提示
            showToast('心情已保存！');
        }

        // 点击心情选项
        document.addEventListener('click', function(event) {
            if (event.target.closest('.mood-option')) {
                const option = event.target.closest('.mood-option');
                
                // 清除其他选中状态
                document.querySelectorAll('.mood-option').forEach(opt => {
                    opt.classList.remove('selected');
                });
                
                // 选中当前选项
                option.classList.add('selected');
                selectedMood = option.dataset.mood;
            }
            
            if (event.target.closest('.tag-option')) {
                const option = event.target.closest('.tag-option');
                const tag = option.dataset.tag;
                
                if (selectedTags.includes(tag)) {
                    // 取消选中
                    selectedTags = selectedTags.filter(t => t !== tag);
                    option.classList.remove('selected');
                } else {
                    // 选中（最多3个标签）
                    if (selectedTags.length < 3) {
                        selectedTags.push(tag);
                        option.classList.add('selected');
                    } else {
                        showToast('最多只能选择3个标签', true);
                    }
                }
            }
        });

        // 点击弹窗背景关闭
        document.addEventListener('click', function(event) {
            if (event.target.id === 'moodModal') {
                closeMoodModal();
            }
        });

        // ESC键关闭弹窗
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape' && document.getElementById('moodModal').classList.contains('show')) {
                closeMoodModal();
            }
        });

        // 获取心情图标
        function getMoodEmoji(mood) {
            if (!mood) return '+';
            switch (mood) {
                case '😊': return '😊';
                case '😴': return '😴';
                case '😤': return '😤';
                case '😌': return '😌';
                case '🔥': return '🔥';
                case '😷': return '😷';
                case '😎': return '😎';
                case '😮‍💨': return '😮‍💨';
                case '🤔': return '🤔';
                case '⚡': return '⚡';
                default: return '+';
            }
        }

        // 获取心情描述
        function getMoodDescription(mood) {
            if (!mood) return '点击设置心情';
            switch (mood) {
                case '😊': return '开心的值班';
                case '😴': return '疲惫的值班';
                case '😤': return '忙碌的值班';
                case '😌': return '轻松的值班';
                case '🔥': return '充满动力';
                case '😷': return '身体不适';
                case '😎': return '信心满满';
                case '😮‍💨': return '感到无奈';
                case '🤔': return '需要思考';
                case '⚡': return '高效工作';
                default: return '点击设置心情';
            }
        }

        // 添加值班到日历
        function addDutiesToCalendar() {
            if (!baseDate || !dutyCycleDays) {
                showToast('请先设置基准时间！', true);
                return;
            }

            const today = new Date();
            today.setHours(0, 0, 0, 0);
            const duties = [];
            
            // 使用与近期值班页面相同的逻辑获取值班日期
            let searchDays = Math.max(dutyCycleDays * 6, 60); // 至少显示6个周期或60天
            searchDays = Math.min(searchDays, 120); // 最多120天
            
            for (let i = 0; i < searchDays; i++) {
                const checkDate = new Date(today);
                checkDate.setDate(today.getDate() + i);
                
                if (checkDutyStatus(checkDate)) {
                    duties.push(checkDate);
                }
            }

            if (duties.length === 0) {
                // 如果范围内没有值班日，找下一个值班日
                const nextDuty = getNextDutyDate(today);
                if (nextDuty) {
                    duties.push(nextDuty);
                }
            }

            // 限制为页面中实际显示的数量（与近期值班页面保持一致）
            const maxDuties = window.innerWidth > 768 ? 12 : 8; // 桌面端12个，移动端8个
            const displayDuties = duties.slice(0, maxDuties);

            if (displayDuties.length === 0) {
                showToast('没有找到值班日期！', true);
                return;
            }

            // 生成ICS文件内容
            const icsContent = generateICSContent(displayDuties);
            
            // 下载ICS文件
            downloadICSFile(icsContent);
            
            showToast(`已生成包含 ${displayDuties.length} 个值班日的日历文件`);
        }

        // 生成ICS文件内容
        function generateICSContent(duties) {
            const now = new Date();
            const timestamp = now.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
            
            let icsContent = [
                'BEGIN:VCALENDAR',
                'VERSION:2.0',
                'PRODID:-//值班管理系统//值班日历//CN',
                'CALSCALE:GREGORIAN',
                'METHOD:PUBLISH',
                'X-WR-CALNAME:值班日历',
                'X-WR-CALDESC:值班管理系统生成的值班日历',
                'X-WR-TIMEZONE:Asia/Shanghai'
            ];

            duties.forEach((date, index) => {
                const dateString = date.toISOString().split('T')[0];
                const moodData = dutyMoods[dateString];
                
                // 生成唯一ID
                const uid = `duty-${dateString}-${timestamp}@dutymanager.local`;
                
                // 格式化日期
                const startDate = formatDateForICS(date);
                const endDate = formatDateForICS(date, true); // 结束时间设为第二天
                
                // 构建事件标题
                let title = '值班';
                if (moodData && moodData.mood) {
                    title = `${moodData.mood} 值班`;
                }
                
                // 构建事件描述
                let description = `值班周期：每${dutyCycleDays}天\\n`;
                if (moodData && moodData.tags && moodData.tags.length > 0) {
                    const tagNames = moodData.tags.map(tag => getTagName(tag)).join('、');
                    description += `标签：${tagNames}\\n`;
                }
                if (moodData && moodData.notes) {
                    description += `备注：${moodData.notes}\\n`;
                }
                description += `\\n由值班管理系统生成`;
                
                icsContent.push(
                    'BEGIN:VEVENT',
                    `UID:${uid}`,
                    `DTSTAMP:${timestamp}`,
                    `DTSTART;VALUE=DATE:${startDate}`,
                    `DTEND;VALUE=DATE:${endDate}`,
                    `SUMMARY:${title}`,
                    `DESCRIPTION:${description}`,
                    'STATUS:CONFIRMED',
                    'TRANSP:TRANSPARENT',
                    'CATEGORIES:工作,值班',
                    'BEGIN:VALARM',
                    'TRIGGER:-PT2H', // 提前2小时提醒
                    'ACTION:DISPLAY',
                    'DESCRIPTION:值班提醒',
                    'END:VALARM',
                    'END:VEVENT'
                );
            });

            icsContent.push('END:VCALENDAR');
            return icsContent.join('\r\n');
        }

        // 格式化日期为ICS格式
        function formatDateForICS(date, isEndDate = false) {
            const d = new Date(date);
            if (isEndDate) {
                d.setDate(d.getDate() + 1); // 结束日期为第二天
            }
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return `${year}${month}${day}`;
        }

        // 下载ICS文件
        function downloadICSFile(content) {
            const blob = new Blob([content], { type: 'text/calendar;charset=utf-8' });
            const url = window.URL.createObjectURL(blob);
            
            const link = document.createElement('a');
            link.href = url;
            link.download = `值班日历_${new Date().toISOString().split('T')[0]}.ics`;
            
            // 触发下载
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            // 清理URL对象
            window.URL.revokeObjectURL(url);
        }
    </script>
</body>
</html> 